@media (max-width: 599px) {
  section { font-weight: 400;}
  .main { padding-top: 20vw; }
  .main_frame { padding-top: 6vw; padding-bottom: 0; }
  .main_head { order: 1; }
  .main_logo { width: 38vw; }
  .main_title { width: 90vw; margin-top: 6vw; }
  .main_sub { align-self: stretch; margin: 4vw 5vw 0; font-size: 3.7vw; line-height: 1.6; text-align: center; }
  .main_sub_em { font-size: 4vw; }
  .main_food { position: relative; inset: auto; transform: translateY(12%); order: 2; margin-top: -6vw; }
  .main_food .swiper-wrapper { align-items: flex-end; }
  .main_food_01, .main_food_02, .main_food_03, .main_food_04 { width: 94vw; margin-top: 0; }
  .main_circle { width: 132vw; top: auto; bottom: -78vw; }
  .main_marquee { position: relative; order: 3; width: 100%; height: auto; padding: 2vw 0; margin-top: -2vw; border-bottom-left-radius: 0; border-bottom-right-radius: 0; z-index: 100; border-bottom: none;}
  .main_marquee_img { width: 80vw; }

  .con01 { padding-top: 14vw; padding-bottom: 0; }
  .con01_head { position: relative; order: 1; text-align: center; padding: 0 5vw; }
  .con01_logo { width: 24vw; }
  .con01_title { width: 88vw; margin-top: 5vw; }
  .con01_sub { margin-top: 5vw; font-size: 4.5vw; line-height: 1.4; }
  .con01_desc { margin-top: 3vw; font-size: 4vw; line-height: 1.6; }
  .con01_list { order: 2; width: 90%; margin-top: 10vw; row-gap: 9vw; }
  .con01_item { width: 47%; text-align: center; }
  .con01_label { width: 76%; padding: 1.4vw 0; box-shadow: 0 0 0 1px #000, 0 0 0 3px #fefefe, 0 0 0 4px #000; }
  .con01_label_01 { width: 19.8vw; }
  .con01_label_02 { width: 23.4vw; }
  .con01_label_03, .con01_label_04 { width: 18.9vw; }
  .con01_num { margin-top: 3.4vw; column-gap: 1vw; }
  .con01_num_val { font-size: 7.2vw; line-height: 1.2; }
  .con01_unit { width: 6vw; height: 6vw; }
  .con01_unit_txt_01, .con01_unit_txt_02 { width: 3.8vw; }
  .con01_cap { margin-top: 2vw; font-size: 3.3vw; line-height: 1.5; }
  .con01_photo { position: relative; inset: auto; transform: none; width: 88vw; order: 3; margin-top: 8vw; margin-bottom: -35.9vw; }
  .con01_line { display: none; }
  .con01_stripe { display: none; }

  .con02 { flex-direction: column; align-items: center; padding-top: 14vw; padding-bottom: 28vw; }
  .con02_left { width: 100%; align-items: center; }
  .con02_left_in { align-items: center; position: static; }
  .con02_head { align-items: center; margin-left: 0; padding: 0 5vw; text-align: center; }
  .con02_logo { width: 25vw; }
  .con02_logo_txt { padding-left: 3vw; font-size: 4.8vw; letter-spacing: 3vw; }
  .con02_title { width: 76vw; margin: 6vw 0 0; }
  .con02_lead, .con02_lead2 { font-size: 3.7vw; line-height: 1.7; }
  .con02_lead { margin-top: 6vw; }
  .con02_lead2 { margin-top: 3vw; }
  .con02_photo { position: absolute; top: auto; right: auto; bottom: -8.2vw; left: -6vw; transform: none; width: 107%; margin-top: 0; z-index: 100; }

  /* PC 카드(좌측 세로 번호띠 + 텍스트 좌측 + 사진 우측 블리드)를 버리고 모바일은
     「본문 박스 + 카드 밖 음식사진」 으로 재구성. 번호띠는 미노출.
     테두리·배경을 .con02_body 에서 .con02_cont 로 옮겨 body 는 사진 배치용 투명 그리드로만 쓴다 */
  .con02_line { display: none; }
  .con02_list { width: 92%; margin-top: 6vw; row-gap: 2vw; border-bottom: 0; }
  .con02_card, .con02_card_02, .con02_card_03 { flex-direction: column; height: auto; border: 0; }

  /* 번호띠(01·02·03) 는 모바일 미노출 — 카드는 본문 박스 하나로 */
  .con02_bar { display: none; }

  .con02_body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; box-sizing: border-box; padding: 0; overflow: visible; column-gap: 3%; row-gap: 7vw; justify-items: center; align-items: end; }
  .con02_body_01 { background-image: none; }
  .con02_body_02, .con02_body_03 { background-color: transparent; }

  /* 정보 카드 본문 */
  .con02_cont { font-weight: 400; grid-column: 1 / -1; order: -1; width: 100%; box-sizing: border-box; min-width: 0; align-items: center; margin: 0; padding: 7vw 5vw; text-align: center; border: 1px solid #cbcbcb; background-image: url('/images/con02_bg.jpg'); background-size: cover; }
  .con02_cont_02, .con02_cont_03 { color: #1d1a19; }
  .con02_card_tt { font-size: 5.8vw; line-height: 1.35; }
  .con02_card_txt { font-size: 3.6vw; line-height: 1.8; }
  .con02_txt01, .con02_txt02, .con02_txt03 { margin-top: 3vw; }
  .con02_txt_gap { margin-top: 2vw; }

  /* 카드01 사진 3장 → 카드 아래 .con02_mflow 마퀴로, 카드02 사진 → 섹션 상단 .con02_mtop 으로 옮겼다.
     카드03 사진(숯 2개 + 감자막창)은 모바일 미노출 */
  .con02_img01, .con02_img02, .con02_img03, .con02_img04, .con02_img05, .con02_img06, .con02_img07 { display: none; }

  /* 섹션 상단 사진 = 카드02 의 감자막창 단면 */
  .con02_mtop { width: 70%; aspect-ratio: 411 / 308; margin-top: 4vw; margin-right: -33vw; margin-bottom: -12vw; }
  /* 카드 아래 마퀴 = 카드01 의 사진 3장 (common.css .flow_sd + marqueeX 20s).
     타일 높이 26vw 로 맞춘 폭 + margin-right 4vw → 1벌 102.57vw, item02 가 left:100% 로 이어받는다 */
  .con02_mflow { margin-top: 5vw; }
  .con02_mflow_move { flex-shrink: 0; }
  .con02_mflow_item { flex-shrink: 0; }
  .con02_mflow_img { flex-shrink: 0; margin-right: 4vw; }
  .con02_mflow_img_01 { width: 35.3232vw; aspect-ratio: 538 / 396; }
  .con02_mflow_img_02 { width: 23.8487vw; aspect-ratio: 388 / 423; }
  .con02_mflow_img_03 { width: 31.4006vw; aspect-ratio: 407 / 337; }
}

@media (max-width: 599px) {
  /* 배지 6개(대구·원조·참숯 / 초벌·전통·막창) — PC 좌우 세로기둥을 버리고
     헤드카피 아래 「한 줄 스탬프 띠」로 재배치.
     section 을 2열 그리드로 바꿔야 ul 2개가 같은 행에 붙는다 (나머지 자식은 전 열 span) */
  .con03 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.8vw; justify-items: center; align-items: start; padding-top: 14vw; padding-bottom: 14vw; }
  .con03_title { grid-column: 1 / -1; grid-row: 1; width: 88vw; }
  .con03_sub { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; margin: 5vw 5vw 0; font-size: 3.5vw; line-height: 1.7; word-break: keep-all; }
  /* 「익숙한 외식 수요 속에서」 다음 줄부터가 두 번째 문장 — b 를 inline-block 으로 띄워 그 구간만 간격을 벌린다 */
  .con03_sub b { display: inline-block; vertical-align: top; margin-top: 2.5vw; }
  .con03_badge_l { grid-column: 1; grid-row: 3; justify-self: end; position: relative; inset: auto; transform: none; flex-direction: row; justify-content: center; align-items: center; column-gap: 1.8vw; row-gap: 0; margin-top: 7.5vw; }
  .con03_badge_r { grid-column: 2; grid-row: 3; justify-self: start; position: relative; inset: auto; transform: none; flex-direction: row; justify-content: center; align-items: center; column-gap: 1.8vw; row-gap: 0; margin-top: 7.5vw; }
  .con03_badge { width: 13.5vw; }

  /* 카드 2장 세로 스택. 링(box-shadow)·모서리는 92vw 폭에서 PC 값(1/5/8px·--px*20)이
     각각 너무 두껍고 너무 각져 보여 모바일 비율로 재조정 */
  .con03_cards { grid-column: 1 / -1; grid-row: 4; flex-direction: column; align-items: center; width: 92%; margin: 4vw 0 0; row-gap: 5vw; }

  /* 검정 카드 — 17.3% 가 주인공. 사진은 흐름에서 빼 카드 하단 배경(opacity .2)으로 깔고
     텍스트 3종(pill·소제목·17.3%)만 .rltv 위에 z-index 10 으로 띄운다.
     height 63vw — 사진이 absol 이라 콘텐츠로는 카드 높이가 안 잡힌다 */
  .con03_card { width: 100%; height: 63vw; padding-top: 8vw; border-radius: 3vw; box-shadow: 0 0 0 1px #000000, 0 0 0 3px #fefefe, 0 0 0 5px #000000; }
  .con03_pill { width: 60%; height: auto; padding: 1.8vw 0; z-index: 10; }
  .con03_pill_txt { width: 42vw; }
  .con03_cardsub { width: 28vw; margin-top: 5vw; font-size: 4vw; line-height: 1.4; text-align: center; z-index: 10; }
  .con03_rate { margin-top: 3vw; font-size: 17vw; letter-spacing: -1vw; line-height: 1; text-shadow: 0 1.2vw 0 #000000; z-index: 10; }
  .con03_rate_unit { font-size: 12.5vw; }
  .con03_food { position: absolute; inset: auto; bottom: 0; transform: none; order: 4; width: 100%; margin-top: 0; overflow: hidden; opacity: 0.2; pointer-events: none; }

  /* 흰 카드(그래프) — 막대 트랙을 키우고 축·출처는 줄여 데이터가 먼저 읽히게 */
  .con03_graph { width: 100%; height: auto; padding: 7vw 3vw; border-radius: 3vw; box-shadow: 0 0 0 1px #000000, 0 0 0 3px #fefefe, 0 0 0 5px #000000; }
  .con03_chart { width: 100%; }
  .con03_legend { column-gap: 4vw; }
  .con03_legend_item { column-gap: 1vw; }
  .con03_legend_dot { width: 3vw; }
  .con03_legend_txt { font-size: 3.3vw; line-height: 1.4; }
  .con03_plot { margin-top: 5vw; }
  .con03_grid { height: 70vw; }
  .con03_grid_row { column-gap: 1.5vw; }
  .con03_grid_num { width: 7vw; font-size: 3.3vw; line-height: 1.3; flex-shrink: 0; }
  .con03_grid_line { width: calc(100% - 8.5vw); }
  .con03_bars { left: 12%; right: 1%; }
  .con03_bar_group { width: 24%; }
  .con03_bar { border-radius: 1.2vw 1.2vw 0 0; }
  .con03_bar_val { margin-top: 1.5vw; font-size: 2.5vw; line-height: 1.3; }
  .con03_bar_pct { margin-top: 1.5vw; width: 74%; }
  .con03_regions { width: 87%; margin-top: 1.4vw; margin-left: 12%; }
  .con03_region { width: 24%; }
  .con03_region_box { width: 100%; box-sizing: border-box; height: auto; padding: 1.6vw 0.8vw; }
  /* 지역명 — 붓글씨 PNG 가 이 크기에서 뭉개져 모바일만 라이브 텍스트로 교체.
     PNG 쪽은 HTML 의 .pc-mobile 이 display:none 처리한다 */
  .con03_region_label { justify-content: center; align-items: center; font-size: 2.8vw; font-weight: 700; line-height: 1.3; letter-spacing: -0.1vw; white-space: nowrap; color: #ffffff; }
  .con03_source { margin-top: 5vw; font-size: 3vw; line-height: 1.6; text-align: center; word-break: keep-all; }

  .con04 { padding-top: 14vw; padding-bottom: 0; }
  .con04_inner { order: -1; width: 90%; align-items: center; }
  .con04_left { align-items: center; text-align: center; }
  .con04_badge { width: 44vw; }
  .con04_title { width: 62vw; margin-top: 6vw; }
  .con04_right { align-self: auto; align-items: center; margin-top: 8vw; text-align: center; }
  .con04_sig { width: 29vw; }
  .con04_name { width: 69vw; margin-top: 3vw; }
  .con04_desc { margin-top: 6vw; font-size: 4vw; line-height: 1.7; text-align: center; }
  /* 감자막창 사진 — 65vw + margin-bottom -44.6vw 는 절반이 잘려 음식이 거의 안 보였다.
     폭을 키우고 잘라내는 양은 PNG 하단의 검정 숯받침(~4%)만큼으로 줄여 꼬치 끝이 섹션 하단에 닿게 한다 */
  .con04_food { position: relative; inset: auto; transform: none; rotate: -50deg; width: 74vw; margin-top: -23vw; margin-right: -38vw; margin-bottom: -4vw; }
  /* 숯받침·스티커 2종 — 눕힌 감자막창 기준으로 재배치 (PC 는 세워진 꼬치 기준이라 좌표가 안 맞아 숨겨뒀던 것)
     DOM 순서 = 숯 → 사진 → 스티커 라 숯이 사진 뒤, 스티커가 사진 위로 그려진다 */
  .con04_charcoal { display: flex; width: 78vw; left: auto; right: -26vw; top: auto; bottom: -6vw; }
  .con04_sticker_01 { display: flex; width: 29vw; left: auto; right: 6.7vw; top: auto; bottom: 42vw; }
  .con04_sticker_02 { display: flex; width: 29vw; left: 6.7vw; top: auto; bottom: 7vw; }
  .con04_stripe { display: none; }

  .con05 { padding-top: 14vw; padding-bottom: 0; }
  .con05_title { order: 1; }
  .con05_title_top { margin-left: 0; font-size: 7vw; line-height: 1.3; text-align: center; }
  .con05_title_main { margin: 3vw 0 0; column-gap: 1vw; }
  .con05_title_logo { width: 48vw; margin-top: 1vw; }
  .con05_title_badge { width: 30vw; }
  .con05_sub { order: 2; margin: 4vw 5vw 0; font-size: 3.5vw; line-height: 1.6; text-align: center; }
  .con05_amount { order: 3; flex-wrap: wrap; justify-content: center; align-items: center; padding-left: 0; margin-top: 8vw; gap: 3vw 1vw; }
  .con05_amount_label { width: 100%; margin-top: 0; }
  .con05_amount_label_top, .con05_amount_label_btm { font-size: 4vw; line-height: 1.4; text-align: center; }
  /* 이중 테두리(흑/백/흑) 제거 — 작은 뱃지에선 선이 여러 개로 뭉쳐 보인다 */
  .con05_amount_label_top { padding: 0.8vw 6vw; border-radius: 50vw; background-color: #e5e0d2; color: #403d2a; box-shadow: 0 0 0 1px #403d2a; }
  .con05_amount_line { display: none; }
  .con05_amount_label_btm { margin-top: 3vw; font-size: 4.8vw; }
  .con05_num { margin-left: 0; column-gap: 0.8vw; }
  .con05_digit { width: 8.2vw; height: 11.4vw; }
  .con05_digit_txt { font-size: 7.4vw; line-height: 1; }
  .con05_comma { width: 1.8vw; margin-top: 5.6vw; font-size: 5.5vw; line-height: 1; }
  .con05_won { margin: 0; font-size: 5vw; line-height: 1.3; }
  .con05_bottom { order: 4; width: 90%; padding: 0; margin-top: 10vw; }
  .con05_stat { width: 47%; }
  .con05_stat_pill { width: 78%; height: auto; padding: 1.2vw 0; align-items: center; box-shadow: 0 0 0 1px #000000; }
  .con05_stat_txt_01, .con05_stat_txt_02 { width: 20vw; margin-top: 0; }
  .con05_stat_num { margin-top: 4vw; font-size: 8.2vw; line-height: 1.4; text-align: center; }
  .con05_stat_num_01 { margin-left: 0; }
  .con05_stat_unit { font-size: 5vw; line-height: 1.4; }
  .con05_photo { position: relative; inset: auto; transform: none; order: 5; width: 71vw; margin-top: 8vw; }
}

@media (max-width: 599px) {
  .con06 { padding-top: 14vw; padding-bottom: 8vw; }
  .con06_photo { display: none; }
  .con06_card { width: 92%; margin: 0; padding-bottom: 8vw; border-radius: 3.5vw; }
  /* 좌우 줄무늬를 버리고 '순수익' 박스만 크게 (mobile-pc 재추출본 208x72) */
  .con06_band { width: 32vw; aspect-ratio: 208 / 72; margin-top: 8vw; }
  .con06_title { margin-top: 6vw; }
  .con06_title_top { font-size: 5vw; line-height: 1.4; text-align: center; }
  .con06_title_main { width: 82vw; margin-top: 2vw; }
  .con06_body { flex-direction: column; align-items: center; width: 90%; margin-top: 7vw; gap: 7vw; }
  /* 원가율 / 투자금 회수기간 2열 가로배치 — 구분선 대신 열로 나눈다 */
  .con06_left { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; justify-items: center; align-items: start; width: 86%; }
  /* 라벨 PNG(붓글씨) 대신 Pretendard 라이브 텍스트(.con06_pill_label). PNG 는 HTML 의 .pc-mobile 이 숨긴다.
     배경은 빨강(#d71718) 대신 섹션이 이미 쓰는 네이비(#184795 — 순수익 밴드·파이 순이익·표 마진율)로 톤을 낮췄다.
     이중 테두리(흑/백/흑)도 이 폭에선 과해서 1px 로 */
  .con06_pill { grid-column: 1; grid-row: 1; width: 29vw; box-sizing: border-box; height: auto; padding: 1.6vw 0 1.5vw; margin-top: 0; background: #184795; box-shadow: none; }
  .con06_pill_label { justify-content: center; align-items: center; font-size: 3.5vw; font-weight: 700; line-height: 1.35; letter-spacing: -0.1vw; white-space: nowrap; color: #ffffff; }
  .con06_pill_02 { grid-column: 2; grid-row: 1; margin-top: 0; }
  .con06_stat_num { grid-column: 1; grid-row: 2; margin: 3.5vw 0 0; font-size: 9.5vw; line-height: 1.3; text-align: center; }
  .con06_stat_num_02 { grid-column: 2; grid-row: 2; }
  .con06_stat_unit { font-size: 5.5vw; line-height: 1.3; }
  .con06_line { display: none; }
  .con06_note { grid-column: 1 / -1; grid-row: 3; align-self: auto; margin-top: 2vw; font-size: 3vw; opacity: 0.8; line-height: 1.6; text-align: center; }
  .con06_pie { width: 100%; margin-left: 0; }
  .con06_table { width: 100%; margin: 0; table-layout: fixed; font-size: 3.3vw; line-height: 1.5; }
  .con06_th_01, .con06_th_02, .con06_th_03, .con06_tf_01, .con06_tf_02, .con06_tf_03 { width: 100%; }
  .con06_tr, .con06_tr_first, .con06_tr_last { height: auto; }
  .con06_tr td, .con06_tr_first td, .con06_tr_last td { padding: 2.5vw 0; }
  .con06_td_amount, .con06_td_rate { padding-right: 0; }

  /* con07_bg.jpg 상단 11.9%(y0~140) 가 파란 바코드 띠 — 모바일은 섹션이 좁아 타이틀이 그 위에 겹친다.
     배경을 섹션 높이의 130% 로 키워 하단 정렬 → 위에서 23.1% 가 잘려 띠가 사라진다 (어두운 텍스처만 남음) */
  .con07 { padding-top: 14vw; padding-bottom: 9vw; clip-path: inset(0 0 -5.4vw 0); background-size: auto 130%; background-position: 50% 100%; }
  .con07_title_top { margin-left: 0; font-size: 5.8vw; line-height: 1.4; text-align: center; }
  .con07_title_main { width: 82vw; margin-top: 3vw; }
  .con07_desc { align-self: stretch; margin: 5vw 5vw 0; font-size: 3.5vw; line-height: 1.7; text-align: center; word-break: keep-all; }
  /* 「높은 테이블 단가…」 부터가 강조 문장 — strong 을 inline-block 으로 띄워 그 구간만 간격을 벌린다 */
  .con07_desc strong { display: inline-block; vertical-align: top; margin-top: 2.5vw; }
  .con07_slider { margin-top: 7vw; }
  .con07_slide { width: 82vw; }
  .con07_card { width: 96vw; height: 111vw; padding-top: 9vw; margin-bottom: -2vw; }
  .con07_num { width: 10vw; margin-right: 0; }
  .con07_num_txt { font-size: 4.8vw; line-height: 1.3; }
  .con07_name { margin-top: 4vw; margin-right: 0; }
  .con07_name_01 { width: 36vw; }
  .con07_name_02 { width: 27vw; }
  .con07_name_03 { width: 11vw; }
  .con07_sub { margin-top: 3vw; column-gap: 1.5vw; margin-right: 0; }
  .con07_stripe { width: 4vw; }
  .con07_sub_txt { font-size: 3.8vw; line-height: 1.4; }
  .con07_card_desc { margin-top: 4vw; padding: 0 4vw; font-size: 3.3vw; line-height: 1.6; }
  .con07_on { position: relative; inset: auto; transform: none; width: 105%; margin-top: -54vw; margin-bottom: -14vw; margin-right: 6vw; rotate: 23deg; }
  .con07_off { width: 105%; left: -2.5%; top: 13vw; }
  .con07_arr { width: 12vw; }
  .con07_prev { left: 6.5vw; top: auto; bottom: 66.4vw; }
  .con07_next { left: auto; right: 6.5vw; top: auto; bottom: 66.4vw; }
  .con07_arr_txt { padding-top: 0; font-size: 8vw; line-height: 1.3; }
  .con07_badge { width: 34vw; left: auto; right: 4vw; top: auto; bottom: 24vw; }
  .con07_badge_txt { left: 29%; top: 23%; font-size: 3.5vw; line-height: 1.4; }
  .con07_tear { width: 100%; bottom: -5.4vw; }

  .con08 { padding-top: 14vw; padding-bottom: 14vw; background-size: auto 112%; background-position: 50% 100%; }
  .con08_stamp { width: 31vw; margin-right: 0; }
  .con08_stamp_txt { font-size: 5.7vw; line-height: 1.3; }
  .con08_title { width: 88vw; margin-top: 5vw; }
  .con08_box { flex-direction: column; width: 92%; margin: 8vw 0 0; row-gap: 1px; }
  .con08_photo { width: 100%; }
  .con08_list { width: 100%; }
  .con08_item, .con08_item_01, .con08_item_02, .con08_item_03 { height: auto; align-items: center; padding: 5vw 4vw; text-align: center; }
  .con08_food, .con08_stripe { display: none; }
  /* 세 라벨은 같은 서체 이미지(시안 높이 44)라 한 배율로만 줄인다 — 높이 5.5vw 통일.
     width = 시안폭 × 5.5/44 (138→17.25 · 160→20 · 103→12.875) */
  .con08_label_01 { width: 17.25vw; }
  .con08_label_02 { width: 20vw; }
  .con08_label_03 { width: 12.875vw; }
  .con08_item_txt { position: relative; margin-top: 3vw; font-size: 3.8vw; line-height: 1.6; }
  .con08_desc { margin: 6vw 5vw 0; font-size: 3.5vw; line-height: 1.7; }
}

@media (max-width: 599px) {
  /* 배경 단색. con09_bg.jpg(PC용)는 상단 y0~74 가 가로 줄무늬 띠, y1190~ 이 흰 여백이라
     모바일에서 그대로 쓰면 gradient 로 위아래를 둘 다 가려야 한다 → 이미지 자체를 뺀다.
     좌우 음식 접시는 모바일 미노출 */
  .con09 { height: auto; padding-top: 9vw; padding-bottom: 14vw; background-color: #ce0d08; background-image: none; }
  .con09_badges { width: 88%; padding: 0; }
  .con09_badge { width: 42vw; }
  .con09_title { width: 58vw; margin-top: 8vw; }
  .con09_desc { margin: 5vw 5vw 0; font-size: 3.5vw; line-height: 1.7; text-align: center; }
  .con09_list { width: 92%; margin: 8vw 0 0; }
  /* 흰 박스 · 영상 · 원형 · 태그가 빨강 배경 위에서 4덩어리로 따로 놀던 걸 카드 한 장으로 묶는다.
     테두리·흰배경은 .con09_info 에서 .con09_card 로 올린다 */
  .con09_card { flex-direction: column; align-items: center; width: 100%; box-sizing: border-box; padding: 0 5vw 5vw; border: 1px solid #000000; border-radius: 3vw; background-color: #ffffff; }
  .con09_card_02, .con09_card_03, .con09_card_04 { margin-top: 3vw; }
  .con09_info { width: 100%; box-sizing: border-box; border: 0; }
  /* 세로 줄무늬 제거 — 4% 를 먹고 있어 가운데정렬이 그만큼 오른쪽으로 밀렸다 */
  .con09_stripe { display: none; }
  .con09_cont { flex-grow: 1; min-width: 0; padding: 7vw 0 0; align-items: center; text-align: center; }
  .con09_num { width: 10vw; margin-left: 0; }
  .con09_num_txt { font-size: 4.8vw; line-height: 1.3; }
  /* 두 줄을 서로 가운데로 맞춘 재추출본(*_m.png). 폭이 제목마다 달라 높이로 크기를 맞춘다 → 4장 글자 크기 동일 */
  .con09_card_tt { width: auto; height: 16vw; aspect-ratio: auto; margin-top: 4vw; }
  .con09_card_tt img { width: auto; height: 100%; }
  .con09_card_sub { margin: 3.5vw 0 0; font-size: 4vw; line-height: 1.5; }
  .con09_card_txt { margin: 3.5vw 0 0; font-size: 3.5vw; line-height: 1.7; word-break: keep-all; }
  /* 읽는 순서 = 본문 → 핵심 태그 → 영상. 태그를 본문 바로 아래로 올려 키워드가 카드 안에서 읽히게 한다.
     제품컷(원형)은 영상 우상단에 겹쳐 세로 소모를 절반으로 — 4개 영상 모두 자막이 좌상단·하단이라 우상단이 비어 있다 */
  .con09_circle { order: 2; align-self: flex-end; position: relative; inset: auto; transform: none; width: 32vw; margin-top: -14vw; margin-right: 3vw; margin-bottom: -15vw; }
  .con09_media { order: 3; width: 100%; box-sizing: border-box; border-radius: 2vw; }
  /* wrap-reverse = 태그 3개짜리 카드(02·04)가 2+1 이 아니라 1+2 삼각으로 쌓인다 */
  .con09_tags { order: 1; position: relative; inset: auto; transform: none; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; width: 100%; gap: 2.5vw; margin-top: 6vw; }
  /* 이중 테두리(흑/백/흑) 제거 */
  .con09_tag { width: 38vw; box-shadow: 0 0 0 1px #000000; }
  .con09_tag_01, .con09_tag_02, .con09_tag_03 { margin: 0; margin-left: 3vw; }
}

@media (max-width: 599px) {
  .con10 { flex-direction: column; align-items: center; padding-top: 14vw; padding-bottom: 0; }
  .con10_left { order: -1; align-items: center; margin: 0; padding: 0 5vw; text-align: center; }
  .con10_title { align-items: center; }
  .con10_title_top { font-size: 5.5vw; line-height: 1.4; }
  .con10_title_main { width: 50vw; margin-top: 4vw; }
  .con10_desc { margin-top: 5vw; font-size: 3.5vw; line-height: 1.7; }
  .con10_nav { margin-top: 5vw; column-gap: 4vw; }
  .con10_prev, .con10_next { width: 12vw; }
  .con10_arr_txt { font-size: 8vw; line-height: 1.3; }
  .con10_arr_txt_prev, .con10_arr_txt_next { padding-top: 0; }
  .con10_slider { order: -1; width: 92%; margin: 7vw 0 0; }
  div.con10_slide { width: 80vw; height: auto; }
  /* HACCP 인증서 카드의 top 만 콘텐츠 높이(208)라 슬라이드 3장 중 혼자 21px 더 높았다.
     → 나머지와 같은 534/333 비율로 고정하고 인증서를 그 안에 맞춰 줄인다 (Swiper stretch 로 생기던 하단 여백 제거) */
  .con10_top_01 { aspect-ratio: 534 / 333; padding: 0; }
  .con10_cert { position: relative; inset: auto; transform: none; width: 40%; }
  .con10_mark { width: 25%; left: auto; right: 4%; top: 5vw; }
  /* width 100% — PC 는 .con10_body 에 폭이 없어 flex item 이 콘텐츠 폭으로 줄고 slide 의 align-items:flex-start 로 좌측에 붙는다.
     모바일은 슬라이드 폭을 꽉 채워야 안쪽 가운데정렬이 사진(.con10_top)과 축이 맞는다 */
  .con10_body { width: 100%; box-sizing: border-box; align-items: center; padding: 7vw 5vw; margin-bottom: 3vw; text-align: center; }
  .con10_num { width: 10vw; margin-left: 0; }
  .con10_num_txt { padding-top: 0; font-size: 4.8vw; line-height: 1.3; }
  .con10_name_01 { width: 58vw; margin-top: 4vw; }
  .con10_name_02, .con10_name_03 { width: 42vw; margin: 4vw 0 0; }
  .con10_card_desc { margin-top: 4vw; font-size: 3.5vw; line-height: 1.7; }
  .con10_food { position: relative; inset: auto; transform: none; width: 101vw; margin-top: -24vw; margin-right: -17vw; margin-bottom: -6vw; }

  .con11 { padding-bottom: 8vw; background-size: 100% 107.7%; background-position: 0 100%; }
  .con11_marquee { height: auto; padding: 2vw 0; }
  .con11_marquee_track { width: 800vw; margin-top: 0; }
  .con11_marquee_item { width: 80vw; }
  .con11_eyebrow { margin-top: 14vw; font-size: 6vw; line-height: 1.4; text-align: center; }
  .con11_title { width: 72vw; margin-top: 3vw; }
  .con11_title_image { width: 100%; }
  .con11_desc { margin: 5vw 5vw 0; font-size: 3.5vw; line-height: 1.7; text-align: center; }
  .con11_rolling { --px: calc(82vw / 565); width: calc(var(--px) * 564); margin-top: 5vw; pointer-events: none; }
  .con11_cards { flex-direction: column; width: 92%; height: auto; margin-top: 7vw; }
  .con11_card, .con11_card_2, .con11_card_3 { width: 100%; padding: 4vw 0; }
  .con11_card_2, .con11_card_3 { border-left: 0; border-top: 1px solid #000000; }
  .con11_card::before { background-position: center; background-size: 100% 100%; }
  .con11_card_1 img { width: 29vw; }
  .con11_card_2 img, .con11_card_3 img { width: 37vw; }
  .con11_food_1, .con11_food_2 { position: relative; inset: auto; transform: none; width: 84vw; }
  .con11_food_1 { margin-top: 4vw; margin-right: 36vw; }
  .con11_food_2 { margin-top: -14vw; margin-left: 36vw; }
}

@media (max-width: 599px) {
  .con12 { align-items: center; padding-bottom: 10vw; }
  .con12_head { order: -1; align-items: center; margin: 14vw 5vw 0; text-align: center; }
  /* 사진 12장이 PC 좌표(4×3 그리드)로 흩어져 있어 모바일에선 타이틀 뒤 자잘한 텍스처가 된다.
     → 좌표 배치본은 숨기고, 같은 12장을 담은 .con12_gallery(센터 슬라이드 · 역방향 오토플레이)를 헤드 아래에 띄운다.
     init/destroy 는 js/slide.js 의 con12GallerySync() 가 matchMedia 로 관리 (PC 는 init 안 함) */
  .con12_photos { display: none; }
  .con12_gallery { display: block; width: 100%; margin-top: 8vw; }
  .con12_gphoto { width: 62vw; border-radius: 4vw; overflow: hidden; }
  .con12_eyebrow { margin: 0; font-size: 6vw; line-height: 1.4; }
  .con12_title { width: 68vw; margin-top: 2vw; }
  .con12_desc { margin-top: 5vw; font-size: 3.5vw; line-height: 1.7; white-space: normal; word-break: keep-all; }
  /* centeredSlides 로 가운데 카드를 두고 양옆을 살짝 보여준다
     → 컨테이너는 화면 꽉(100%), 카드는 74vw 로 줄여 양옆 peek 확보 */
  .con12_reviews { width: 100%; margin: 5vw 0 0; }
  .con12_review, .con12_review_17, .con12_review_18, .con12_review_19 { width: 74vw; }
  .con12_review img { width: 100%; }
  /* PC 는 폰 PNG 의 오른쪽이 잘린 채 화면 밖으로 14% 나가는 구도다(con12_21.png 우측 열이 하드컷).
     모바일에서 가운데 두면 그 크롭 단면이 화면 한가운데 세로 직선으로 드러난다 → 같은 비율로 우측 블리드.
     중앙정렬 flex 라 margin-left 의 절반만큼 밀린다(53vw → 26.5vw 이동, 좌 44vw / 우 109vw) */
  .con12_phone { position: relative; inset: auto; transform: none; width: 78vw; margin-top: 8vw; margin-left: 25vw; margin-bottom: -36vw; }
  /* SNS 아이콘 3종 — PC 의 「폰 대비 비율」 그대로 이식. 폰 top 200.5vw · 폭 65vw · 높이 110.6vw 기준.
     bottom 기준이면 폰·배지를 바꿀 때마다 같이 틀어지므로 top 기준으로 바꾼다 */
  /* 소셜 아이콘 3종 — PC 와 같은 「폰 폭 기준 비율」로 다시 얹는다 (폰 86vw · left 7vw 기준).
     top 대신 bottom 앵커 — 위쪽(갤러리·헤드)이 바뀌어도 폰에 붙어 있게 */
  .con12_naver { width: 11.9vw; left: 27.9%; right: auto; top: auto; bottom: 97.2vw; }
  .con12_instagram { width: 11.9vw; left: 19%; right: auto; top: auto; bottom: 74.3vw; }
  .con12_youtube { width: 12.7vw; left: 66.8%; right: auto; top: auto; bottom: 94vw; }
  /* 배지 → 폰 왼쪽 빈 공간으로 (PC 도 폰 좌측에 겹쳐 있다). margin-top 음수로 폰 밑선에 맞춰 겹친다 */
  /* 원 안 정렬 — 라벨 2줄(인스타그램 / 총 조회수) + 수치를 세로 가운데로 */
  .con12_badge { width: 28vw; height: 28vw; left: 7vw; right: auto; top: auto; bottom: 31.6vw; justify-content: center; }
  .con12_badge_bg { width: 100%; }
  .con12_badge_label { margin: 0; font-size: 3.3vw; line-height: 1.35; text-align: center; }
  .con12_badge_value { width: 19vw; margin: 1.2vw 0 0; }
  .con12_tail { display: none; }
  /* .con12_paper 는 con13 찢긴 종이로 이어지는 「다리」였는데 con13 을 단색 패널로 바꿔서 갈 곳이 없어졌다.
     con12 하단에 13px 짜리 찢긴 종이 조각만 남아 얼룩처럼 보인다 → 모바일에서 제외.
     .con12_tail 은 검정 위 검정이라 그대로 둬도 안 보인다 */
  .con12_paper { display: none; }
  .con12_strip { display: none; }
}

@media (max-width: 599px) {
  .con13 { display: grid; grid-template-columns: 100%; justify-items: center; align-items: start; padding-top: 0; padding-bottom: 0; }
  /* 찢긴 종이(.con13_paper) 대신 단색 패널. con13_03.png 내부는 텍스처 없는 평면 #e9e9e9 라 색은 동일하고
     지저분하던 찢긴 가장자리만 사라진다. 섹션 상단 padding 을 여기로 옮겨 패널이 섹션 맨 위에 붙는다 */
  .con13_content { grid-row: 1; align-items: center; width: 100%; box-sizing: border-box; margin-left: 0; padding: 10vw 5vw 10vw; text-align: center; background-color: #e9e9e9; }
  .con13_eyebrow { margin-right: 0; font-size: 6vw; line-height: 1.4; }
  .con13_title { justify-content: center; gap: 2vw; margin: 1vw 0 0; }
  .con13_title_words { width: 50vw; margin-top: 1vw; }
  .con13_title_brand { width: 34vw; }
  .con13_desc { margin: 4vw 0 0; font-size: 3.5vw; line-height: 1.7; white-space: normal; }
  .con13_media { margin-top: 4vw; }
  .con13_video { width: 100%; height: auto; }
  .con13_chef { position: relative; inset: auto; transform: none; grid-row: 2; grid-column: 1; width: 100vw; margin-top: 0; }
  /* 음식은 요리사 도마 위에 얹는다. bottom 기준은 섹션 하단(= chef 밑 + padding-bottom 8vw)이라
     로고가 row4 에서 빠져 섹션이 짧아진 만큼 값을 다시 잡았다 (37vw → 6vw) */
  .con13_food { transform: none; width: 73vw; left: 14vw; right: auto; top: auto; bottom: 0vw; rotate: -5deg; }
  /* 로고를 요리사 컷 위로 — chef 와 같은 grid 셀(row 2)에 넣어 겹친다. DOM 이 chef·food 뒤라 위에 그려진다.
     align-self:start + margin-top 은 세로 배치용 (가로 가운데정렬은 .con13 의 justify-items:center 가 한다) */
  .con13_logo { position: relative; inset: auto; transform: none; grid-row: 2; grid-column: 1; align-self: start; width: 33vw; margin-top: 5vw; }
  /* con13_03.png 은 좌측만 찢긴 형태이고 우하단(가로 68% 지점부터)이 계단식으로 파여 있다.
     PC 는 left 802 · 폭 1110 이라 그 파인 부분이 화면 밖으로 나가지만, 모바일에서 100% 폭으로 깔면
     흰 패널 오른쪽에 검은 사각형이 물린 것처럼 보인다 → 이미지를 155% 로 키워 파인 부분을 우측 밖으로 보내고
     래퍼를 height + overflow 로 잘라 쓴다. top 은 상단 찢긴 가장자리(이미지 상단 10%)를 섹션 밖으로 빼는 값 */
  .con13_paper { display: none; }

  .con14 { padding-top: 15vw; padding-bottom: 15vw; }
  .con14_band { height: 12.5vw; }
  .con14_band_img { display: none; }
  .con14_badge { --px: calc(36vw / 208); margin-top: 0; margin-right: 0; }
  .con14_eyebrow { margin: 5vw 0 0; font-size: 6vw; line-height: 1.4; text-align: center; }
  .con14_title { margin: 2vw 0 0; }
  .con14_title_img { width: 88vw; }
  .con14_desc { margin: 5vw 5vw 0; font-size: 3.5vw; line-height: 1.7; white-space: normal; text-align: center; word-break: keep-all; }
  .con14_gallery { margin-top: 6vw; }
  .con14_slide { width: 88vw; }
  /* 80 → 88vw 로 키우면서 PC 비율(800/476 = 1.68)을 그대로 유지: 47.6 × 88/80 = 52.4 */
  .con14_media { height: 52.4vw; border-radius: 4vw; }
  /* PC 는 212×56 배지에 5px 흰 + 8px 검정 이중링이다. 그 px 값이 그대로 내려오면
     140×35 배지에서 링만 두꺼져 시끄럽다 → vw 로 바꿔 배지 비율대로 얇게.
     border-radius 도 글로벌 --px 로 8px 가 돼 pill 이 아니라 둥근 사각형이었다 → 50vw 로 복원 */
  .con14_owner { width: 36vw; height: 9vw; margin-top: -4.5vw; font-size: 4vw; line-height: 1.4; border-radius: 50vw; }
  .swiper-slide-active .con14_owner { box-shadow: 0 0 0 0.5vw #fefefe, 0 0 0 0.9vw #000000; }
  /* 슬라이드 위로 명시해 영상 영역을 가리지 않게 한다 (con10_nav 와 같은 흐름 배치) */
  .con14_nav { column-gap: 4vw; margin-bottom: 4vw; }
  /* static 이 아니라 relative — 안의 .con14_arrow_bg 가 absol + width:100% 라
     버튼이 positioned 에서 빠지면 기준이 .con14_gallery(390px) 로 튀어 블롭이 화면을 덮는다 */
  .con14_prev, .con14_next { position: relative; inset: auto; transform: none; width: 13vw; height: 11.7vw; }
  .con14_arrow_bg { width: 100%; }
  .con14_arrow { font-size: 8vw; line-height: 1.3; }
}

@media (max-width: 599px) {
  .con15 { padding-top: 15vw; background-size: 100% 100%; }
  .con15_eyebrow { margin-right: 0; font-size: 6vw; line-height: 1.4; text-align: center; }
  .con15_title { --px: calc(88vw / 626); width: 88vw; align-self: auto; margin-top: 2vw; }
  .con15_t7 { left: 0; }
  .con15_t8 { left: calc(var(--px) * 334); }
  .con15_t9 { left: calc(var(--px) * 391); }
  .con15_t11 { left: calc(var(--px) * 345); }
  .con15_t10 { left: calc(var(--px) * 485); }
  .con15_desc { margin: 5vw 5vw 0; font-size: 3.5vw; line-height: 1.7; white-space: normal; }
  .con15_scene { margin: 8vw 0 0; }
  /* 좌우 레일이 같은 사진 4장이라 모바일은 한 줄만 남긴다 (오른쪽 레일은 역방향 복제본) */
  .con15_swiper { position: relative; inset: auto; transform: none; width: 100vw; margin: 0 0 10vw; }
  .con15_right { display: none; }
  /* PC 는 끊김없이 흐르는 마퀴라 linear 고정인데, 모바일은 한 장씩 넘어가므로 감속을 준다 */
  .con15_track { transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1) !important; }
  .con15_slide { width: 43vw; }
  .con15_arch { width: 80vw; margin: 4vw 0 0; }
  .con15_shop { position: relative; inset: auto; transform: none; width: 90vw; margin-top: -55vw; bottom: -1vw; }
  .con15_band { display: none; }
  .con15_bubble { --px: calc(43vw / 348); }
  .con15_bubble1 { left: 5vw; top: auto; bottom: 45vw; }
  .con15_bubble2 { left: auto; right: 5vw; top: auto; bottom: 52vw; }
}

@media (max-width: 599px) {
  /* 종이 찢긴 배경 이미지가 모바일 폭에선 어색하게 잘린다 → 이미지 빼고 단색 흰 배경 */
  .con16 { padding-bottom: 14vw; background-image: none; background-color: #ffffff; }
  .con16_marquee { --px: calc(100vw / 588); box-sizing: border-box; border-top: 1px solid #000000; border-bottom: 1px solid #000000; }
  .con16_label { width: 34vw; }
  .con16_stripe { display: none; }
  .con16_band { margin-top: 13vw; }
  .con16_eyebrow { margin: 6vw 0 0; font-size: 6vw; line-height: 1.4; }
  .con16_title { margin: 2vw 0 0; }
  .con16_brand { width: 38vw; margin-left: 2vw; }
  .con16_menu { width: 31vw; margin-left: 1vw; }
  .con16_mark { width: 5vw; }
  .con16_mark:last-child { margin-left: 2vw; }
  .con16_tabs { justify-content: center; flex-wrap: wrap; gap: 3vw; margin: 8vw 4vw 0; }
  .con16_tab { width: 36vw; height: auto; padding: 3vw 1vw; margin-left: 0; font-size: 4.3vw; line-height: 1.4; }
  .con16_tab:first-child, .con16_tab:nth-child(3) { margin: 0; }
  .con16_panel { min-height: 0; }
  /* 1행 스와이퍼 — 화살표를 놓을 좌우 여백이 없어 모바일은 스와이프로만 넘긴다 */
  /* 카드 캐러셀을 화면 전폭으로 — 부모가 92% 면 100vw 가 오른쪽으로 4% 밀리므로 부모도 전폭으로 연다 */
  .con16_slider { width: 100%; margin: 8vw 0 0; flex-wrap: wrap; row-gap: 5vw; column-gap: 8vw; }
  /* flex-shrink 0 — .con16_slider 가 flex 라 기본 shrink 1 이면 100vw 가 부모 폭으로 줄어든다 */
  .con16_list { width: 100vw; height: auto; flex-shrink: 0; }
  /* 화살표를 슬라이더 아래 한 줄로 (con14·con19 와 같은 패턴) */
  .con16_prev, .con16_next { position: relative; inset: auto; transform: none; width: 17vw; height: 15.3vw; }
  /* 버튼을 키운 만큼 안쪽 화살표(--px 기반이라 모바일선 미세해짐)도 같이 */
  .con16_arrow_bg { width: 17vw; }
  .con16_arrow { font-size: 11vw; line-height: 11vw; }
  .con16_card { height: auto; border-radius: 4vw; }
  /* 게시판 이미지 대응(원본 비율 제각각) — 사진 박스 높이를 고정하고 .con16_food 가 채운다 */
  .con16_photo, .con16_card.is-open .con16_photo { height: 43vw; padding-bottom: 0; }
  .con16_food { position: relative; inset: auto; transform: none; width: 100%; height: 100%; }
  .con16_caption { padding: 5vw 2vw 6vw; text-align: center; }
  .con16_name, .con16_card.is-open .con16_name { margin-top: 0; font-size: 4.3vw; line-height: 1.4; white-space: normal; }
  .con16_description { margin-top: 3vw; font-size: 3.3vw; line-height: 1.6; white-space: normal; opacity: 1; visibility: visible; }
  /* 본문은 게시판 wr_content 의 nl2br — 관리자가 PC 폭 기준으로 넣은 줄바꿈이라
     48% 칼럼(약 156px)에서는 「막창이」 같은 한 단어 줄이 생긴다 → 모바일은 자연 흐름 */
  .con16_description br { display: none; }
  /* 이중 테두리(흑/백/흑) 제거 — 흰 배경 + 검정 글자만으로 선택 상태가 충분히 구분된다 */
  .con16_tab.is-active { box-shadow: 0 0 0 1px #000000; }
  .con16_empty { font-size: 3.5vw; }

  .con17 { display: grid; grid-template-columns: 100%; justify-items: center; padding-bottom: 0; clip-path: none; }
  /* 음식을 인트로와 카드01 사이로 옮기기 위해 .con17_row 를 display:contents 로 풀어 intro·cards 를 .con17 grid 의 직접 항목으로 만든다.
     row 의 padding-top 14vw 는 intro 로 이관. DOM 순서가 food → row(intro·cards) 라 둘 다 음식 위에 그려진다(z-index 불필요).
     JS(con17-m01) 는 .con17_cards / .con17_card 만 참조하므로 row 박스가 사라져도 영향 없음 */
  .con17_row { display: contents; }
  .con17_intro { grid-row: 1; align-items: center; margin: 0; padding: 14vw 5vw 0; text-align: center; }
  .con17_seal { width: 20vw; margin: 0 0 5vw; }
  .con17_eyebrow { font-size: 6vw; line-height: 1.4; }
  .con17_title { margin: 3vw 0 0; }
  .con17_title_img { width: 86vw; }
  .con17_desc01, .con17_desc02 { font-size: 3.5vw; line-height: 1.7; white-space: normal; }
  .con17_desc01 { margin-top: 5vw; }
  .con17_desc02 { margin-top: 4vw; }
  .con17_cards { grid-row: 3; width: 88%; margin: 0; gap: 6vw; }
  .con17_card { width: 100%; border-radius: 4vw; overflow: hidden; }
  .con17_photo { width: 100%; margin-bottom: -1vw; }
  .con17_caption { height: 45vw; }
  .con17_panel { width: 100%; }
  .con17_card_title { margin-top: 9vw; }
  .con17_card_title_img_01 { width: 32vw; }
  .con17_card_title_img_02 { width: 46.4vw; }
  .con17_card_title_img_03 { width: 44.8vw; }
  .con17_card_title_img_04 { width: 37.6vw; }
  .con17_card_desc { margin-top: 4vw; font-size: 3.5vw; line-height: 1.6; white-space: normal; }
  .con17_badge, .con17_card_01 .con17_badge, .con17_card_03 .con17_badge, .con17_card_04 .con17_badge { left: 0; width: 12vw; height: 12vw; }
  .con17_badge_img_01, .con17_badge_img_02, .con17_badge_img_03, .con17_badge_img_04 { width: 100%; }
  .con17_number { font-size: 4.8vw; }
  /* .con17_shade 는 카드 「전체」(사진+흰 패널)를 덮는 rgba(0,0,0,.7) 이고 PC 는 hover(.con17_card_on)로 걷힌다.
     터치에는 hover 가 없어 4장 중 3장이 영구히 30% 어둡게 남는다 → 제목·본문 대비가 죽는다.
     모바일은 전부 걷어 4장 모두 읽히게 한다 (탭 토글은 시각 효과만 없어질 뿐 동작엔 영향 없음) */
  .con17_shade { opacity: 0; }
  .con17_food { position: relative; inset: auto; transform: none; grid-row: 2; width: 83vw; margin-top: 0vw; margin-bottom: -13vw; rotate: 14deg; margin-right: -1vw; }
  .con17_marquee { --px: calc(100vw / 588); position: relative; inset: auto; transform: none; grid-row: 4; margin-top: 12vw; border-top: 1px solid #000; z-index: 100;}
}

@media (max-width: 599px) {
  .con18 { padding-top: 14vw; padding-bottom: 0; z-index: 100; }
  .con18_title { margin-left: 0; }
  .con18_mark { --px: calc(5vw / 44); margin-top: 2vw; }
  .con18_brand { width: 38vw; margin-left: 2vw; }
  .con18_heading { width: 31vw; margin: 1vw 2vw 0 1vw; }
  .con18_desc { margin: 5vw 5vw 0; font-weight: 400; font-size: 3.5vw; line-height: 1.7; white-space: normal; text-align: center; }
  /* PC 구도 그대로 — 흐림 처리된 가격표를 검정 카드가 덮고, 표는 카드 좌우로만 비친다.
     표를 140vw 로 넓게 깔고(섹션 overflow 가 자름) 카드를 음수 margin 으로 끌어올려 덮는다.
     카드 프레임 PNG(568:623 고정비)는 내용 높이와 안 맞아 숨기고 같은 모양을 CSS 로 그린다.
     음식 접시는 카드 밖 .con18_food_m(모바일 전용)으로 분리 */
  .con18_stage { width: 100%; margin: 8vw 0 0; }
  .con18_cost { position: relative; inset: auto; transform: none; width: 140vw; }
  .con18_card { width: 76vw; height: auto; margin: -65.5vw 0 0; }
  .con18_card_bg { display: none; }
  .con18_content { width: 100%; height: auto; margin-top: 0; box-sizing: border-box; padding: 8vw 0 9vw; background-color: #000000; border-radius: 4vw; box-shadow: 0 0 0 1px #000000, 0 0 0 3px #ffffff, 0 0 0 4px #000000; overflow: visible; }
  .con18_logo { width: 27vw; margin-top: 0; }
  .con18_copy { margin: 4vw 0 0; font-size: 3.5vw; line-height: 1.6; white-space: normal; }
  .con18_call { margin: 6vw 0 0; align-items: center; }
  .con18_circle { width: 12vw; }
  .con18_icon { width: 7vw; }
  .con18_number { width: 50vw; margin: 0 0 0 2vw; }
  .con18_food { display: none; }
  .con18_food_m { width: 70vw; aspect-ratio: 467 / 427; margin-top: 8vw; margin-bottom: -28vw; }
  .con18_side { top: 6vw; display: none;}
}

@media (max-width: 599px) {
  .con19 { padding-top: 14vw; padding-bottom: 14vw; }
  .con19_logo { width: 18vw; }
  .con19_title { margin: 5vw 0 0; }
  .con19_mark { --px: calc(5vw / 44); margin-top: 2vw; }
  .con19_brand { width: 38vw; margin-left: 2vw; }
  .con19_heading { width: 31vw; margin: 1vw 2vw 0 1vw; }
  .con19_steps { width: 88%; flex-direction: column; margin: 8vw 0 0; gap: 3vw; }
  /* 번호(왼쪽, 2행 걸침) + 제목·설명(오른쪽) 2열. 가운데 세로 쌓기보다 카드 높이가 줄고 폭이 찬다 */
  .con19_step, .con19_step_1 { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 4vw; row-gap: 3vw; width: 100%; padding: 6vw 5vw; margin-bottom: 0; text-align: left; }
  .con19_step_2, .con19_step_5, .con19_step_8 { margin-right: 0; }
  .con19_step_7, .con19_step_8, .con19_step_9 { margin-top: 0; }
  .con19_badge { grid-row: 1 / span 2; width: 9vw; height: 8.1vw; }
  .con19_badge_img { width: 100%; }
  .con19_number { font-size: 3.8vw; line-height: 1.3; }
  /* 제목 9개는 같은 서체 이미지라 --px 하나로 같이 줄인다 — 가장 넓은 07(296) = 38.4vw (기존 48vw 의 80%) */
  .con19_step_title { --px: calc(38.4vw / 296); grid-column: 2; margin-top: 0; }
  .con19_copy { grid-column: 2; margin-top: 0; font-size: 3.4vw; line-height: 1.6; white-space: normal; }
  .con19_stripe { display: none; }
  .con19 .con19_arrow { display: none; }
  .con19_wave { width: 320%; }

  /* band 를 숨겨서(PC 는 band 의 margin-top 100 이 하단 여백) 목록이 섹션 밑선에 붙는다 → 하단 여백을 섹션이 갖는다 */
  .con20 { padding-top: 14vw; padding-bottom: 14vw; }
  .con20_logo { width: 18vw; }
  .con20_title { margin: 5vw 0 0; }
  .con20_mark { --px: calc(5vw / 44); margin-top: 2vw; }
  .con20_brand { width: 38vw; margin-left: 2vw; }
  .con20_heading { width: 31vw; margin: 1vw 2vw 0 1vw; }
  .con20_stage { margin-top: 8vw; border: 0; row-gap: 0; }
  .con20_band { width: 100%; margin-top: 8vw; display: none;}
  .con20 .noshop { font-size: 3.3vw; line-height: 1.6; padding: 5vw; }
  /* ── 매장안내 모바일 재구성 ──
     PC: 테두리 박스 안에 「좌 목록(스크롤) + 우 지도」, 검색창은 박스 윗선에 걸침.
     모바일: 박스를 걷고 「검색창 → 지도 → 매장 카드 목록」 세로 흐름. 검색창·지도·카드를 같은 1px 선 + 둥근 모서리로 통일.
     지도 높이 70vw — 첫 화면에 지도와 첫 카드가 같이 보이는 선. overflow:hidden 은 카카오 타일을 둥근 모서리로 자르기 위함.
     height 사유: 지도는 콘텐츠가 없는 JS 캔버스라 높이를 주지 않으면 0 이 된다(PC 도 명시 높이) */
  .con20_map { order: 0; height: 70vw; box-sizing: border-box; margin-top: 4vw; border: 1px solid #241a1b; border-radius: 4vw; overflow: hidden; }

  /* 목록 — 12개 전부 펼치면 섹션이 2천px 가 넘는다. PC 처럼 내부 스크롤(카드 2장 + 3장째가 비치는 90vw)을 유지하고
     위·아래 6vw 를 대칭 페이드로 흐린다. 같은 6vw 를 padding 으로 줘서 정지 상태의 첫 카드·스크롤 끝의 마지막 카드는 페이드 밖에 온전히 보인다.
     지도↔목록 간격은 stage row-gap 이 아니라 이 padding-top 이 맡는다(row-gap 까지 더하면 간격이 두 배) */
  .con20_stores { order: 1; max-height: 90vw; row-gap: 2.5vw; padding: 6vw 0; background: transparent; border-right: 0; scrollbar-gutter: auto; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6vw, #000 calc(100% - 6vw), transparent); mask-image: linear-gradient(to bottom, transparent, #000 6vw, #000 calc(100% - 6vw), transparent); }

  /* 매장 카드 — 줄 구분선 대신 한 장씩 둥근 카드. 매장명 / 주소 / 전화 / 네이버 지도 세로 컬럼.
     네이버 지도 버튼은 항상 왼쪽 아래 — 전화번호가 없는 매장(빈 <p>)이 있어 가로 배치하면 버튼 위치가 들쭉날쭉해진다 */
  .con20_stores .store, .con20_stores .store.is-last { padding: 4vw 5vw; border: 1px solid #241a1b; border-radius: 4vw; background: #fff; }
  .con20_store_head { padding: 0 12vw 0 0; }
  .con20_store_name { color: #241a1b; }
  .con20 .map_plus { top: 2.4vw; right: 5vw; }
}

@media (max-width: 599px) {
  .con14_badge_cell { display: flex; justify-content: center; align-items: center; }
  .con14_letter { position: relative; inset: auto; transform: none; }
  .con21_phone_icon { left: auto; top: auto; }
}